<template>
  <div>
    <div class="header">
      <div class="all_coin">
        <p>{{userInfo.coinAmount}}</p>
        <span>当前可用积分</span>
      </div>
      <router-link to="/points-exp?code=0">
        <img src="@/assets/images/coin_rule.png" class="coin_rule" />
      </router-link>
    </div>
    <div class="content">
      <van-tabs v-model="active" title-active-color="#28b46a" :line-width="100" color="#28b46a">
        <van-tab title="全部">
          <van-list
            v-model="list[0].loading"
            :finished="list[0].finished"
            :finished-text="list[0].items.length>0?'没有更多了~':''"
            @load="onLoad(0)"
          >
            <div v-for="(item,index) in list[0].items" :key="index" class="items">
              <div>
                <p>{{item.type}}</p>
                <span>{{item.createTime}}</span>
              </div>
              <p :class="item.num<0?'use':'get'" v-text="item.num<0?item.num:'+'+item.num"></p>
            </div>
          </van-list>
          <div class="noDate" v-if="!list[0].loading&&list[0].items.length<=0">
            <img src="@/assets/images/null.png" alt />
            <p>暂无相应明细</p>
          </div>
        </van-tab>
        <van-tab title="获取积分">
          <van-list
            v-model="list[1].loading"
            :finished="list[1].finished"
            :finished-text="list[1].items.length>0?'没有更多了~':''"
            @load="onLoad(1)"
          >
            <div v-for="(item,index) in list[1].items" :key="index" class="items">
              <div>
                <p>{{item.type}}</p>
                <span>{{item.createTime}}</span>
              </div>
              <p class="get" v-text="item.num<0?item.num:'+'+item.num"></p>
            </div>
          </van-list>
          <div class="noDate" v-if="!list[1].loading&&list[1].items.length<=0">
            <img src="@/assets/images/null.png" alt />
            <p>暂无相应明细</p>
          </div>
        </van-tab>
        <van-tab title="已用积分">
          <van-list
            v-model="list[2].loading"
            :finished="list[2].finished"
            :finished-text="list[2].items.length>0?'没有更多了~':''"
            @load="onLoad(2)"
          >
            <div v-for="(item,index) in list[2].items" :key="index" class="items">
              <div>
                <p>{{item.type}}</p>
                <span>{{item.createTime}}</span>
              </div>
              <p class="use" v-text="item.num<0?item.num:'+'+item.num"></p>
            </div>
          </van-list>
          <div class="noDate" v-if="!list[2].loading&&list[2].items.length<=0">
            <img src="@/assets/images/null.png" alt />
            <p>暂无相应明细</p>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import { Tab, Tabs, List, Dialog } from 'vant';
import moment from 'moment';
export default {
  data() {
    return {
      moment,
      active: '0',
      userInfo: {},
      type: ['3', '1', '2'],
      list: [
        {
          items: [],
          refreshing: false,
          loading: false,
          error: false,
          finished: false,
          pageNum: 1
        },
        {
          items: [],
          refreshing: false,
          loading: false,
          error: false,
          finished: false,
          pageNum: 1
        },
        {
          items: [],
          refreshing: false,
          loading: false,
          error: false,
          finished: false,
          pageNum: 1
        }
      ]
    };
  },
  components: {
    'van-list': List,
    'van-tabs': Tabs,
    'van-tab': Tab
  },
  mounted() {
    this.currentUserInfo();
  },
  methods: {
    // 获取用户信息

    currentUserInfo() {
      this.$http.post('/tuser/userInfo', {}).then(res => {
        console.log(res);
        if (res.data.object.isAuth === '0') {
          Dialog.alert({
            title: '提示',
            message: '您还未实名认证',
            // cancelButtonText: '再看看',
            confirmButtonText: '去认证'
          }).then(() => {
            this.$router.replace('/real_name');
          });
          // .catch(() => {});
        } else {
          this.userInfo = res.data.object;
        }
      });
    },
    onLoad(index) {
      const list = this.list[index];
      setTimeout(() => {
        this.$http
          .post('/coinUseRecord/list', {
            type: this.type[this.active],
            pageNum: list.pageNum++
          })
          .then(res => {
            console.log(res);
            list.items.push(...res.data.object.list);
            list.loading = false;
            if (res.data.object.isLastPage) {
              list.finished = true;
            }
          });
      }, 500);
    }
  }
};
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  height: 300px;
  background-image: linear-gradient(163deg, #49c785 11%, #28b56a 100%);
  position: relative;
  .all_coin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    p {
      font-size: 93.7px;
      color: #ffffff;
    }
    span {
      font-size: 24px;
      color: #ffffff;
    }
  }
  .coin_rule {
    display: block;
    width: 165px;
    height: 46px;
    position: absolute;
    top: 21px;
    right: 0;
  }
}
.content {
  .items {
    width: 750px;
    height: 140px;
    background-color: #ffffff;
    border-bottom: 1px solid #ebebeb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    div {
      p {
        font-size: 32px;
        color: #080808;
      }
      span {
        font-size: 26px;
        color: #8f8f8f;
      }
    }
    .use {
      font-size: 40px;
      color: #fc0202;
    }
    .get {
      font-size: 40px;
      color: #28b46a;
    }
  }
  .noDate {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 375px;
    left: 50%;
    transform: translateX(-50%);
    img {
      width: 147px;
      height: 168px;
    }
    p {
      font-size: 36px;
      color: #868688;
      margin-top: 20px;
    }
  }
}
</style>
-* 